<template>

  <div class="Insure_content">
    <ul>
      <li v-for="arr in free_policy">
        <div class="Insure_des">
          <div class="Insure_des_t">人生意外保险
            <div class=" success" v-if="arr.policy_result==0">投保中</div>
            <div class=" success" v-if="arr.policy_result==1">投保成功</div>
            <div class=" fail" v-if="arr.policy_result==2">投保失败</div>

          </div>
          投保人：{{arr.name}}<br>
          保单号：{{arr.policy_id}}
        </div>
        <div class="Insure_time">
          报投保时间：{{arr.create_date |timeDate}}
        </div>
      </li>
      <li v-for=" (arr,index) in pay_policy">
        <div class="Insure_des">
          <div class="Insure_des_t">人生意外保险
            <div class="success" v-if="arr.status == 0">待支付</div>
            <div class="success" v-if="arr.status == 1">支付成功，投保中</div>
            <div class="success" v-if="arr.status == 3">投保成功</div>
            <div class="success" v-if="arr.status == 4">投保失败</div>
            <div class="fail" v-if="arr.status == 5">订单关闭</div>
            <div class="fail" v-if="arr.status == 6">退款中</div>
            <div class="fail" v-if="arr.status == 7">退款成功</div>
          </div>
          <template v-if="arr.status == 3">
            投保人：{{arr.name}}<br>
            保单号：{{arr.policy_id}}
          </template>
          <template v-else>
            投保人：{{arr.name}}
          </template>
          <span v-if="arr.status==3 && arr.take_effect == 0">保险未生效</span>
        </div>
        <div class="Insure_time" v-if="arr.status==0 ">
          订单将于2小时后后关闭
          <div class="Insure_stats">
            <button class="Insure_closeOrder Insure_btn" :data-policy="arr.policy_order" :data-order="arr.order_id"
                    @click="closeOrder(index,arr)">关闭订单
            </button>
            <button ref="payment" :data-policy="arr.policy_order" :data-order="arr.order_id"
                    class="Insure_payment Insure_btn" @click="payment">立即支付
            </button>
          </div>
        </div>
      </li>
      <!--<li>-->
      <!--<div class="Insure_des">-->
      <!--<div>人生意外保险 </div>-->
      <!--<span>保单未生效</span>-->
      <!--</div>-->
      <!--<div class="Insure_time">-->
      <!--<div class="question" @click="question">遇到问题?</div>-->
      <!--<div class="Insure_stats">保单生成中</div>-->
      <!--</div>-->
      <!--</li>-->

      <!--<li>-->
      <!--<div class="Insure_des">-->
      <!--<div>人生意外保险-->
      <!--<div class="Insure_stats fail">投保失败</div>-->
      <!--</div>-->
      <!--<span>保单未生效</span>-->
      <!--</div>-->
      <!--<div class="Insure_time">-->
      <!--<div class="question" @click="question">遇到问题?</div>-->
      <!--<div class="Insure_stats">-->
      <!--<button class="Insure_closeOrder Insure_btn" @click="refund">申请退款</button>-->
      <!--<button class="Insure_payment Insure_btn" @click="again">再次投保</button>-->
      <!--</div>-->
      <!--</div>-->
      <!--</li>-->
      <!--<li>-->
      <!--<div class="Insure_des">-->
      <!--<div>人生意外保险-->
      <!--<div class="Insure_stats fail">投保失败</div>-->
      <!--</div>-->
      <!--<span>保单未生效</span>-->
      <!--</div>-->
      <!--<div class="Insure_time">-->
      <!--<div class="question" @click="question">遇到问题?</div>-->
      <!--<div class="Insure_stats">-->
      <!--退款中-->
      <!--</div>-->
      <!--</div>-->
      <!--</li>-->
      <!--<li>-->
      <!--<div class="Insure_des">-->
      <!--<div>人生意外保险-->
      <!--<div class="Insure_stats fail">投保失败</div>-->
      <!--</div>-->
      <!--<span>保单未生效</span>-->
      <!--</div>-->
      <!--<div class="Insure_time">-->
      <!--<div class="question" @click="question">遇到问题?</div>-->
      <!--<div class="Insure_stats">-->
      <!--成功-->
      <!--</div>-->
      <!--</div>-->
      <!--</li>-->
    </ul>
    <!--<router-link class="Insure" :to="{name:'submit',params:{bid:1}}">为家人投保</router-link>-->
    <template v-if="residue_degree!=0">
        <router-link class="Insure" :to="{name:'submit',query:{price:this.price}}">为家人投保</router-link>
        <div class="Opportunity">您有{{residue_degree}}次为家人增加安全保障的机会</div>
        <div class="remainingTime">
          可投保剩余时间：{{times.Day}}天{{times.Hour}}小时{{times.Minute}}分
        </div>
    </template>
    <div class="piccTel">PICC咨询电话：010-88119842（周一至周五早9:00-17:00）</div>
    <masks></masks>
  </div>
</template>
<script>
  import masks from '../base/mask.vue'
  import api from '../api'
  import js from  '../js/dom.js'

  export default {
    filters:{
        timeDate:function (value) {
          return new Date(value * 1000).toLocaleString().replace(/\-(\d)\b/g, "-0$1")
        }
    },
    data(){
      return {
        residue_degree: 0, //剩余保险次数
        free_policy: [],//免费保险
        pay_policy: [], //支付保险
        times: {
          Day: 0,  //剩余天
          Hour: 0, //剩余小时
          Minute: 0, //剩余分钟
          time: '',//当前系统时间
          active_date: ''//车辆激活时间
        },
//        status:'' // 订单状态
        price:''
      }
    },
    created(){
      //获取首页数据
      this.$axios.get(api.index()).then(
        res => {
          if (res.code = 1) {
            console.log(res);
            let data = res.data.data
            this.residue_degree = data.residue_degree//剩余保险次数
            this.free_policy = data.free_policy//免费保险
            this.pay_policy = data.pay_policy//支付保险
            this.times.time = data.time//当前系统时间
            this.times.active_date = data.active_date//车辆激活时间
            this.price = data.active_date//车辆激活时间
//              this.status =  data.status//订单状态
            this.price= data.price





          }
        },
        err => {
          console.log(err);
        }
      )

      //倒计时
      var that = this.times
      var enterChat = setInterval(function () {
        var difference = parseInt(that.active_date) + parseInt(24 * 60 * 60 * 7) - parseInt(that.time);
        // 剩余天数
        var Day = parseInt(difference / (24 * 60 * 60 ))
        //取余
        var T = difference % (24 * 60 * 60 )
        //剩余小时数
        var Hour = parseInt(T / (60 * 60 ))
        //取余
        var S = T % (60 * 60 )
        //剩余分钟数
        var Minute = parseInt(S / 60)
        that.Day = Day
        that.Hour = Hour
        that.Minute = Minute
        // clearInterval(enterChat);
      }, 1000);
    },
    methods: {
      payment(event){
        event.preventDefault();
        let target = event.target
        let policy = target.getAttribute("data-policy")
        let order = target.getAttribute("data-order")
        this.$axios.post(api.orderpay(), {policy_order: policy, order_id: order}).then(
          res => {
            document.body.appendChildPlus(res.data)
//            const div = document.createElement('div');
//            div.innerHTML = res.data;
//            document.body.appendChild(div);
          },
          err => {
            console.log(err);
          }
        )
      },
      question(){

      },
      refund(){
      },
      again(){
      },
      closeOrder(index,arr){
        event.preventDefault();
        let target = event.target
        let policy = target.getAttribute("data-policy")
        let order = target.getAttribute("data-order")
        this.$axios.post(api.closeOrder(), {policy_order: policy, order_id: order}).then(
          res => {
            console.log(res);
            if (res.data.code == 1) {

              arr.status =res.data.data.status; //关闭订单，改变列表支付状态
              this.residue_degree = res.data.data.residue_degree  //关闭订单改变剩余投保次数


            }
          },
          err => {
            console.log(err);
          }
        )
      }
    },
    computed: {},
    components: {
      masks
    }
  }
</script>
<style scoped lang="less">
  .Insure_content {
    width: 100%;
    background-image: url("../image/bg.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-color: #f2f2f2;
    min-height: 100%;
    overflow: scroll;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    ul {
      width: 93%;
      margin: 0 auto;
      margin-top: 35px;
    }
  }

  li {
    font-size: 12px;
    height: auto;
    overflow: hidden;
    background-color: #fff;
    margin-bottom: 16px;
    border-radius: 10px;
    color: #585858;
    .Insure_des {
      padding: 8px;
      line-height: 24px;
      .Insure_des_t {
        font-weight: bold;
        font-size: 15px;
        margin-bottom: 5px;
        display: flex;
        justify-content: space-between;
        .Insure_stats {

        }
        .success {
          color: #ff7300;
        }
        .fail {
          color: #8d8d8d;
        }
      }
      span {
        color: #b8b8b8
      }
    }

    .Insure_time {
      border-top: 1px solid #E3E3E3;
      margin-left: 9px;
      margin-right: 9px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      .Insure_stats {
        color: #8d8d8d;
      }
      .Insure_btn {
        padding: 4px 12px;
        border-radius: 13px;
      }
      .Insure_payment {
        background-color: #2f9af5;
        border: 1px solid #2f9af5;
        color: #fff;
      }
      .Insure_closeOrder {
        border: 1px solid #E3E3E3;
        margin-right: 5px;
      }
      .question {
        color: #0098ef;
      }
    }
  }

  .Insure {
    border-radius: 23px;
    margin-top: 28px;
    background-color: #2f9af5;
    color: #fff;
    width: 80%;
    margin-left: 10%;
    display: block;
    text-align: center;
    line-height: 48px;
  }

  .Opportunity {
    width: 100%;
    text-align: center;
    color: #919191;
    font-size: 12px;
    line-height: 30px;
  }

  .remainingTime {
    width: 100%;
    margin-top: 26px;
    text-align: center;
    color: #ff7300;
    font-size: 12px;
    line-height: 30px;
  }

  .piccTel {
    width: 100%;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #919191;
    margin-top: 26px;
    font-size: 12px;
  }
</style>
